<template>
	<div class="el-form-wrap">
		<el-form
			ref="form"
			:label-width="labelWidth"
			:status-icon="false"
			:inline="inline"
			:model="form"
			:size="size"
			:label-position="labelPosition"
		>
			<slot name="formPre"> </slot>
			<template v-for="(item, key) in form">
				<el-form-item
					v-if="item.tag && !item.hidden"
					:key="key"
					:prop="`${key}.value`"
					v-bind="item"
				>
					<!-- <template v-if="['el-select'].includes(item.tag)">
						{{ item.items.length }}
					</template> -->
					<component
						:is="item.tag"
						v-bind="item.props || {}"
						v-on="item.on || {}"
						v-model="item.value"
						v-if="['el-select'].includes(item.tag)"
						:key="item.items.length"
					>
						<el-option v-for="(e, i) in item.items" :key="i" v-bind="e">
						</el-option>
					</component>
					<Uploader
						v-model="item.value"
						v-else-if="item.tag == 'Uploader'"
						v-bind="item.props || {}"
					/>
					<component
						:is="item.tag"
						v-bind="item.props || {}"
						v-on="item.on || {}"
						v-model="item.value"
						v-else
					/>
				</el-form-item>
			</template>
			<slot name="formSuf"> </slot>
			<slot name="formBtn">
				<el-form-item label=" ">
					<el-button color="#2563EB" type="primary" @click="submit">
						搜索
					</el-button>
					<el-button color="#2563EB" @click="reset"> 重置 </el-button>
				</el-form-item>
			</slot>
		</el-form>
	</div>
</template>

<script lang="ts">
export default {
	props: {
		size: {
			type: String,
			default: "small",
		},
		labelWidth: {
			type: String,
			default: "",
		},
		form: {
			type: Object,
			default: () => ({}),
		},
		inline: {
			type: Boolean,
			default: true,
		},
		labelPosition: {
			type: String,
			default: "left",
		},
	},
	data() {
		return {
			fileList: [],
			formValues: {},
		};
	},
	watch: {},
	methods: {
		reset() {
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate((valid: Boolean, res: Object) => {
				if (valid) {
					const resForm = {};
					for (const key in this.form) {
						if (Object.prototype.hasOwnProperty.call(this.form, key)) {
							if (!this.form[key].hidden) resForm[key] = this.form[key].value;
						}
					}
					this.formValues = resForm;
					return this.$emit("submit", resForm);
				} else {
					return this.$emit("unvalid", res);
				}
			});
		},
	},
};
</script>

<style lang="less" scoped>
.el-form-wrap {
	:deep(.el-form--label-top) {
		.el-form-item__label {
			padding: 0;
		}
	}
}
</style>

